<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <title>Document</title>
    <style>
        .layui-anim {
            width: 100px;
            height: 100px;
            border-radius: 10%;
            float: left;
            margin: 5px;
        }
    </style>
    <!--教师端-->
    <link href="../../layui-v2.5.7/layui/css/layui.css" rel="stylesheet">
    <script src="../../layui-v2.5.7/layui/layui.js"></script>

    <!--笔记本端-->
    <!--    <link rel="stylesheet" href="../../layui/css/layui.css">
        <script src="../../layui/layui.js"></script>-->
</head>
<body>
<!--栅格 (未完成)-->

<div class="layui-container">
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">标题一</li>
            <li>标题二</li>
            <li>标题三</li>
            <li>标题四</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">内容1</div>
            <div class="layui-tab-item">内容2</div>
            <div class="layui-tab-item">内容3</div>
            <div class="layui-tab-item">内容4</div>
        </div>

        <button class="layui-btn" lay-filter="login" lay-submit>登入</button>
    </div>
</div>
<!--颜色-->
<div class="layui-container">
    <div class="layui-bg-blue">Blue</div>
    <div class="layui-bg-black">Black</div>
    <div class="layui-bg-cyan">Cyan</div>
    <div class="layui-bg-gray">Gray</div>
    <div class="layui-bg-green">Green</div>
    <div class="layui-bg-orange">Orange</div>
    <div class="layui-bg-red">Red</div>
</div>
<!--图标-->
<div class="layui-container">
    <i class="layui-icon">&#xe60c;</i>
    <i class="layui-icon">&#xe68f;</i>
    <i class="layui-icon layui-icon-face-smile" style="color: rebeccapurple;font-size:50px"></i>
    <i class="layui-icon layui-icon-ios" style="font-size: 50px"></i>
</div>
<!--动画-->
<div class="layui-container">
    <h1>追加：layui-anim-loop 循环动画</h1>
    <div class="layui-anim layui-anim-up layui-bg-blue layui-anim-loop">从最底部往上滑入</div>
    <div class="layui-anim layui-anim-upbit layui-bg-blue layui-anim-loop">微微往上滑入</div>
    <div class="layui-anim layui-anim-scaleSpring layui-bg-blue layui-anim-loop">平滑放大</div>
    <div class="layui-anim layui-anim-fadein layui-bg-blue layui-anim-loop">渐现</div>
    <div class="layui-anim layui-anim-fadeout layui-bg-blue layui-anim-loop">渐隐</div>
    <div class="layui-anim layui-anim-rotate layui-bg-blue layui-anim-loop">360度旋转</div>
</div>
<br>
<!--按钮-->
<div class="layui-container" style="clear: both">
    <button class="layui-btn">默认</button>
    <button class="layui-btn layui-btn-primary">原始</button>
    <button class="layui-btn layui-btn-normal">百搭</button>
    <button class="layui-btn layui-btn-warm">暖色</button>
    <button class="layui-btn layui-btn-danger">警告</button>
    <button class="layui-btn layui-btn-disabled">禁用</button>
</div>
<!--导航-->
<div class="layui-container">
    <div class="layui-nav">
        <li class="layui-nav-item"><a href="#">最新活动</a></li>
        <li class="layui-nav-item layui-this"><a href="#">最新活动</a></li>
        <li class="layui-nav-item"><a href="#">大数据</a></li>
        <li class="layui-nav-item">
            <a href="">解决方案</a>
            <dl class="layui-nav-child">
                <dd><a href="">模块1</a></dd>
                <dd><a href="">模块2</a></dd>
                <dd><a href="">模块3</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="">社区</a></li>
    </div>
    <script>
        layui.use('element', function () {
            let element = layui.element();
        });
    </script>
</div>
<!--小导航-->
<div class="layui-container">
    <span class="layui-breadcrumb" lay-separator="|">
        <a href="">1</a>
        <a href="">2</a>
        <a href="">3</a>
        <a href="">4</a>
    </span>
</div>
<!--选项卡-->
<div class="layui-container">
    <ul class="layui-tab-title">
        <li class="layui-this">设置</li>
        <li>用户管理</li>
        <li>权限分配</li>
        <li>商品管理</li>
        <li>订单管理</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">1</div>
        <div class="layui-tab-item">2</div>
        <div class="layui-tab-item">3</div>
        <div class="layui-tab-item">4</div>
        <script>
            layui.use('element', function () {
                let element = layui.element;

                //…
            });
        </script>
    </div>
</div>
<!--选项卡简洁风格-->
<div class="layui-container">
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this">设置</li>
            <li>用户管理</li>
            <li>权限分配</li>
            <li>商品管理</li>
            <li>订单管理</li>
        </ul>
        <div class="layui-tab-content"></div>
    </div>
</div>
<!--进度条-->
<div class="layui-container">
    <div class="layui-progress">
        <div class="layui-progress-bar" lay-percent="25%"></div>
    </div>
    <br>
    <div class="layui-progress layui-progress-big" lay-showPercent="yes">
        <div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
    </div>
</div>
<!--卡片面板-->
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-lg6">
            <div class="layui-card">
                <div class="layui-card-header">卡片面板</div>
                <div class="layui-card-body">结合栅格系统做兼容结合栅格系统做兼容结合栅格系统做兼容</div>
            </div>
        </div>
        <div class="layui-col-lg6">
            <div class="layui-card">
                <div class="layui-card-header">卡片面板</div>
                <div class="layui-card-body">结合栅格系统做兼容结合栅格系统做兼容结合栅格系统做兼容结合栅格系统做兼容</div>
            </div>
        </div>
    </div>
</div>
<!--折叠面板-->
<div class="layui-container">
    <div class="layui-collapse" lay-accordion>
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">作者</h2>
                <div class="layui-colla-content layui-show">内容</div>
            </div>
        </div>
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">作者</h2>
                <div class="layui-colla-content layui-show">内容</div>
            </div>
        </div>
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">作者</h2>
                <div class="layui-colla-content layui-show">内容</div>
            </div>
        </div>
    </div>

    <script>
        layui.use('element', function () {
            let element = layui.element;
        });
    </script>
</div>
<!--表格-->
<div class="layui-container">
    <table class="layui-table">
        <colgroup>
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>user</th>
            <th>time</th>
            <th>name</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>name1</td>
            <td>2020-12-12</td>
            <td>一程山水一场空</td>
        </tr>
        <tr>
            <td>name1</td>
            <td>2020-12-12</td>
            <td>一程山水一场空</td>
        </tr>
        <tr>
            <td>name1</td>
            <td>2020-12-12</td>
            <td>一程山水一场空</td>
        </tr>
        <tr>
            <td>name1</td>
            <td>2020-12-12</td>
            <td>一程山水一场空</td>
        </tr>
        </tbody>
    </table>
    <br>
    <table class="layui-table" lay-even lay-size="lg" lay-skin="line">
        <colgroup>
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>user</th>
            <th>time</th>
            <th>name</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>name1</td>
            <td>2020-12-12</td>
            <td>一程山水一场空</td>
        </tr>
        <tr>
            <td>name1</td>
            <td>2020-12-12</td>
            <td>一程山水一场空</td>
        </tr>
        <tr>
            <td>name1</td>
            <td>2020-12-12</td>
            <td>一程山水一场空</td>
        </tr>
        <tr>
            <td>name1</td>
            <td>2020-12-12</td>
            <td>一程山水一场空</td>
        </tr>
        </tbody>
    </table>
</div>
<!--徽章-->
<div class="layui-container">
    <ul class="layui-tab-title">
        <li class="layui-this">Setting</li>
        <li>用户管理 <span class="layui-badge-dot"></span></li>
        <li>Email <span class="layui-badge">99+</span></li>
    </ul>
    <div class="layui-tab-content"></div>
</div>
<!--辅助-->
<div class="layui-container">
    <blockquote class="layui-elem-quote">引用区域</blockquote>
    <blockquote class="layui-elem-quote layui-quote-nm">引用区域文字</blockquote>
    <!--字段集区块-->
    <fieldset class="layui-elem-field">
        <legend>字段集区块</legend>
        <div class="layui-field-box">
            内容区域
        </div>
    </fieldset>

    <!--无边框-->
    <fieldset class="layui-elem-field layui-field-title">
        <legend>橫綫風格</legend>
        <div class="layui-field-box">内容區域，你可以把它看作是一个有标题的横线</div>
    </fieldset>
</div>
<!--分割綫-->
<div class="layui-container">
    默认分割线
    <hr>

    赤色分割线
    <hr class="layui-bg-red">

    橙色分割线
    <hr class="layui-bg-orange">

    墨绿分割线
    <hr class="layui-bg-green">

    青色分割线
    <hr class="layui-bg-cyan">

    蓝色分割线
    <hr class="layui-bg-blue">

    黑色分割线
    <hr class="layui-bg-black">

    灰色分割线
    <hr class="layui-bg-gray">
</div>
</body>
</html>